<template>
  <div class="main-body"
       :style="{'-webkit-overflow-scrolling': scrollMode}">
    <v-loadmore :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :auto-fill="false"
                ref="loadmore">
      <ul class="list"
          v-for="(item, index) in pageList"
          :key="index">
        <li>
          <!-- query -->
          <router-link class="list-box border-botInfo"
                       :to="{ name:'myApplicationDetail',params: { jobId: item.jobId}}"
                       tag="div">
            <mt-cell>
              <span slot="title">
                任务类型:{{item.jobType|jobType}}
              </span>
            </mt-cell>
            <mt-cell>
              <span slot="title">{{item.startTime | momentHHmm}}
                <span style="color: #26a2ff">
                  <i style="color: #999">从 </i>{{item.startAddress}}</span>
              </span>
            </mt-cell>
            <mt-cell title="">
              <span slot="title">{{item.desTime | momentHHmm}}
                <span style="color: #26a2ff">
                  <i style="color: #999">到 </i>{{item.startAddress}}</span>
              </span>
            </mt-cell>
            <mt-cell title=""
                     is-link>
              <p>审批状态：{{ item.reviewStatus | reviewStatusInfo }}</p>
            </mt-cell>
          </router-link>
        </li>
      </ul>
    </v-loadmore>
  </div>

</template>

<script>
import ComFetch from 'common/fetch'
import { Loadmore, Cell } from 'mint-ui'
export default {
  name: 'List',
  components: {
    // [Loadmore.name]: Loadmore,
    'v-loadmore': Loadmore,
    [Cell.name]: Cell
    // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
    // 推荐应用组件时用a-b形式起名
  },
  props: {
  },
  data () {
    return {
      status: 0, // 状态
      jobType: 0, // 任务类型
      recordCount: 0, // 当前页面条数
      list: [],
      searchCondition: { // 分页属性
        pageNo: '1',
        pageSize: '10'
      },
      pageList: [],
      allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
    }
  },
  computed: {
  },
  methods: {
    findCarJobsByParamsOfP (index) {
      // index 1. 下拉刷新&&第一次加载 2.上拉加载更多
      ComFetch.post('/phone/myApplication/findCarJobsByParamsOfPage', {
        status: this.status,
        jobType: this.jobType,
        recordCount: this.recordCount
      })
        .then(res => {
          if (res.data) {
            let content = res.data.content || ''
            content = JSON.parse(content) || []
            // console.log(content)
            this.list = content

            if (index === 1) {
              this.pageList = content
              this.$nextTick(function () {
                // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
                // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
                // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
                this.scrollMode = 'touch'
              })
            } else {
              this.pageList = this.pageList.concat(content)
            }
            this.recordCount = (this.recordCount) + (content.length)
            // console.log(this.recordCount)
            // console.log(this.allLoaded)
            this.isHaveMore(content)
          } else {
          }
        })
        .catch(res => { })
    },
    loadTop: function () { // 组件提供的下拉触发方法
      this.recordCount = 0
      this.status = 0
      this.jobType = 0
      // 下拉加载
      this.findCarJobsByParamsOfP(1)
      this.$refs.loadmore.onTopLoaded()// 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function () {
      // 上拉加载
      this.findCarJobsByParamsOfP(2)// 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded()// 固定方法，查询完要调用一次，用于重新定位
    },
    isHaveMore: function (isHaveMore) {
      // 是否还有下一页，如果没有就禁止上拉刷新
      this.allLoaded = true // true是禁止上拉加载
      if (isHaveMore) {
        this.allLoaded = false
      }
    }

  },
  mounted () {
    // this.loadPageList()  //初次访问查询列表
    this.findCarJobsByParamsOfP(1)
  }
}
</script>

<style lang="stylus" scoped>
</style>
